<template>
  <!-- 放置弹层组件 -->
  <!-- title 表示弹框标题 -->
  <!-- visible 控制弹框的隐藏显示 -->
  <!-- close-on-click-modal 点击遮罩不关闭 -->
  <!--  open事件是弹框打开时触发 -->
  <el-dialog
    :title="titles"
    :visible="showDialog"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <el-form
      ref="formData"
      label-width="120px"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="文章标题:" prop="title">
        <el-input
          v-model="formData.title"
          style="width: 80%"
          placeholder="请输入文章标题 "
        />
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <!-- @blur="onEditorBlur" 富文本编辑校验失败了-->
        <quill-editor v-model="formData.articleBody"
        :options="editorOption">
        </quill-editor>
      </el-form-item>
      <el-form-item label="视频地址" prop="videoURL">
        <el-input
          v-model="formData.videoURL"
          style="width: 80%"
          placeholder="请输入视频地址"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" >
      <el-button @click="closeDialog" >取 消</el-button>
      <el-button type="primary" @click="addDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/articles'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  name: 'AddDept',
  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加错斜体下划线 还是拿出现
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接,图片,视频
          ]
        },
        placeholder: '请输入正文'
      },
      formData: {
        id: '',
        title: '',
        articleBody: '',
        videoURL: ''
      },

      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    titles () {
      return this.formData.id ? '编辑文章' : '新增文章'
    }
  },
  methods: {
    // 富文本校验
    // onEditorBlur () {
    //   this.$refs.ruleForm.validateField('articleBody')
    // },
    // 点击确认
    // 编辑功能
    async edits () {
      this.$emit('update:showDialog', true)
      this.formData = this.$parent.list
      // await update(this.formData)
      // this.formData.title = res.title
      // this.formData.articleBody = res.articleBody
      // this.formData.videoURL = res.videoURL
    },
    addDialog () {
      this.$refs.formData.validate(async flag => {
        if (!flag) return
        if (this.formData.id) {
          await update(this.formData)
          this.$message.success('恭喜！修改成功')
        } else {
          await add(this.formData)
          // 提醒
          this.$message.success('恭喜！添加成功')
        // // 关闭弹窗
        }
        this.closeDialog()
        // 列表重新加载
        this.$parent.creatData()
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('update:showDialog', false)
      this.$refs.formData.resetFields()
    }
  }
}

</script>
<style scoped>
::v-deep .ql-editor{
  min-height: 200px;

}
</style>
